<template>
  <div class="form-item" :class="formTypeClass" :style="'width:' + width" @click="clickCnt++">
    <div>
      <template v-if="formField">
        <template v-if="!invisible">
          <div v-if="fieldType == 'Text'">
            <textInput :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'Date'">
            <datePicker :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'DateRange'">
            <daterangePicker :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'Number'">
            <numberInput :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'Selection'">
            <selection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'MultiSelection'">
            <multiSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CheckBox'">
            <checkBox :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CompanySelection'">
            <companySelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              :departmentId="departmentId" @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'EmployeeSelection'">
            <employeeSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" :departmentId="departmentId" />
          </div>
          <div v-else-if="fieldType == 'InsureTypeSelection'">
            <insureTypeSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'ExpenseTypeSelection'">
            <expenseTypeSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'FileUpload'">
            <fileUpload :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'AreaSelection'">
            <areaSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CompanyMultiSelection'">
            <companyMultiSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" :departmentId="departmentId" />
          </div>
          <div v-else-if="fieldType == 'EmployeeMultiSelection'">
            <employeeMultiSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" :departmentId="departmentId" />
          </div>
          <div v-else-if="fieldType == 'CaseSelection'">
            <caseSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CaseDetailSelection'">
            <caseDetailSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CaseLogSelection'">
            <caseLogSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'PersonalInvoiceSelection'">
            <personalInvoiceSelection :creatorId="creatorId" :value="fieldValue" :props="formField.props"
              :disabled="disabled" @input="dataInput" @display="dataDisplay" :required="required"
              :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'DetailList'">
            <detailList :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'DetailListPlus'">
            <detailListPlus :creatorId="creatorId" :value="fieldValue" :props="formField.props" :disabled="disabled"
              :invisible="invisible" @input="dataInput" @display="dataDisplay" :required="required"
              :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'CaseChargeDetail'">
            <caseChargeDetail :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'NodeTypeSelection'">
            <nodeTypeSelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'QuickExpenseForm'">
            <quickExpenseForm :creatorId="creatorId" :value="fieldValue" :props="formField.props" :disabled="disabled"
              @input="dataInput" @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'SurveySelection'">
            <surveySelection :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'SurveyList'">
            <surveyList :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'SignInList'">
            <signInList :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
          <div v-else-if="fieldType == 'Location'">
            <location :value="fieldValue" :props="formField.props" :disabled="disabled" @input="dataInput"
              @display="dataDisplay" :required="required" :isBusiness="isBusiness" />
          </div>
        </template>
      </template>
      <template v-else>请设置字段</template>
    </div>
  </div>
</template>
<script>
import textInput from '@/views/web/flowManage/components/formField/textInput.vue'
import numberInput from '@/views/web/flowManage/components/formField/numberInput.vue'
import datePicker from '@/views/web/flowManage/components/formField/datePicker.vue'
import daterangePicker from '@/views/web/flowManage/components/formField/daterangePicker.vue'
import selection from '@/views/web/flowManage/components/formField/selection.vue'
import multiSelection from '@/views/web/flowManage/components/formField/multiSelection.vue'
import companySelection from '@/views/web/flowManage/components/formField/companySelection.vue'
import companyMultiSelection from '@/views/web/flowManage/components/formField/companyMultiSelection.vue'
import employeeSelection from '@/views/web/flowManage/components/formField/employeeSelection.vue'
import employeeMultiSelection from '@/views/web/flowManage/components/formField/employeeMultiSelection.vue'
import insureTypeSelection from '@/views/web/flowManage/components/formField/insureTypeSelection.vue'
import expenseTypeSelection from '@/views/web/flowManage/components/formField/expenseTypeSelection.vue'
import nodeTypeSelection from '@/views/web/flowManage/components/formField/nodeTypeSelection.vue'
import fileUpload from '@/views/web/flowManage/components/formField/fileUpload.vue'
import areaSelection from '@/views/web/flowManage/components/formField/areaSelection.vue'
import caseSelection from '@/views/web/flowManage/components/formField/caseSelection.vue'
import caseDetailSelection from '@/views/web/flowManage/components/formField/caseDetailSelection.vue'
import caseLogSelection from '@/views/web/flowManage/components/formField/caseLogSelection.vue'
import personalInvoiceSelection from '@/views/web/flowManage/components/formField/personalInvoiceSelection.vue'
import checkBox from '@/views/web/flowManage/components/formField/checkBox.vue'
import detailList from '@/views/web/flowManage/components/formField/detailList.vue'
import detailListPlus from '@/views/web/flowManage/components/formField/detailListPlus.vue'
import caseChargeDetail from '@/views/web/flowManage/components/formField/caseChargeDetail.vue'
import quickExpenseForm from '@/views/web/flowManage/components/formField/quickExpenseForm.vue'
import surveySelection from '@/views/web/flowManage/components/formField/surveySelection.vue'
import surveyList from '@/views/web/flowManage/components/formField/surveyList.vue'
import signInList from '@/views/web/flowManage/components/formField/signInList.vue'
import location from '@/views/web/flowManage/components/formField/location.vue'
import '@/styles/form.css'
export default {
  components: {
    textInput,
    numberInput,
    datePicker,
    daterangePicker,
    selection,
    multiSelection,
    checkBox,
    companySelection,
    companyMultiSelection,
    employeeSelection,
    employeeMultiSelection,
    insureTypeSelection,
    expenseTypeSelection,
    nodeTypeSelection,
    fileUpload,
    areaSelection,
    caseSelection,
    caseDetailSelection,
    caseLogSelection,
    personalInvoiceSelection,
    detailList,
    detailListPlus,
    caseChargeDetail,
    quickExpenseForm,
    surveySelection,
    surveyList,
    signInList,
    location
  },
  props: ['formField', 'isBusiness', 'form'],
  data: function () {
    return {
      clickCnt: 0,
    }
  },
  methods: {
    dataInput(val) {
      if (JSON.stringify(val) != JSON.stringify(this.formField.FFV_Value)) {
        this.$emit('change', val)
      }
      this.formField.FFV_Value = val
    },
    dataDisplay(val) {
      this.formField.FFV_DisplayValue = val
    },
  },
  computed: {
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '80px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '80px'
        }
      }
      return '80px'
    },
    creatorId() {
      return this.form?.WFM_CreateEmpId
    },
    departmentId() {
      return this.form?.WFM_DepartmentId
    },
    fieldValue() {
      return this.formField.FFV_Value
    },
    fieldType() {
      return this.formField ? this.formField.FFLD_TypeDesc : null
    },
    required() {
      return this.isBusiness
        ? this.formField.BFF_Require
        : this.formField.FF_Require
    },
    disabled() {
      if (this.clickCnt >= 10) {
        return false
      }
      return this.formField.FFV_Disable || this.formField.disable
    },
    invisible() {
      return this.formField.invisible
    },
    formTypeClass() {
      return [
        'FileUpload',
        'CompanyMultiSelection',
        'EmployeeMultiSelection',
        'CaseDetailSelection',
        'CaseLogSelection',
        'PersonalInvoiceSelection',
        'DetailList',
        'CaseChargeDetail',
        'EmployeeSelection',
        'CompanySelection',
      ].indexOf(this.fieldType) > 0
        ? 'form-item-border'
        : ''
    },
  },
}
</script>
<style scoped></style>